//- Copyright (C) 2023 Beijing Huaxia Chunsong Technology Co., Ltd. 
//- <https://www.chatopera.com>, Licensed under the Chunsong Public 
//- License, Version 1.0  (the "License"), https://docs.cskefu.com/licenses/v1.html
//- Unless required by applicable law or agreed to in writing, software
//- distributed under the License is distributed on an "AS IS" BASIS,
//- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//- See the License for the specific language governing permissions and
//- limitations under the License.
//- Copyright (C) 2018-Jun. 2023 Chatopera Inc, <https://www.chatopera.com>
//- Licensed under the Apache License, Version 2.0
//- http://www.apache.org/licenses/LICENSE-2.0
extends /admin/include/layout.pug

block content
    .row(style='margin-bottom:20px;')
        .col-lg-12
            h1.site-h1 在线客服业务概况
            .row
                .col-lg-3
                    .ukefu-measure
                        a.ukefu-bt(href='/apps/onlineuser.html')
                            i.layui-icon.ukewo-btn.ukefu-measure-btn 
                            .ukefu-bt-text
                                .ukefu-bt-text-title(style='font-weight:400;font-size:19px;')
                                    | #{onlineUserCache ? onlineUserCache : 0}/#{onlineUserClients ? onlineUserClients : 0}
                                .ukefu-bt-text-content 访客：在线/长连接
                .col-lg-3
                    .ukefu-measure
                        a.ukefu-bt(href='/service/agent/index.html')
                            i.kfont.icon-iconfontagent.ukewo-btn.ukefu-measure-btn.ukefu-bg-color-yellow
                            .ukefu-bt-text
                                .ukefu-bt-text-title(style='font-weight:400;font-size:19px;')
                                    | #{agentReport.agents}/#{agents ? agents : 0}
                                .ukefu-bt-text-content 坐席:在线/全部
                .col-lg-3
                    .ukefu-measure
                        a.ukefu-bt(href='/service/quene/index.html')
                            i.layui-icon.ukewo-btn.ukefu-measure-btn.ukefu-bg-color-pink 
                            .ukefu-bt-text
                                .ukefu-bt-text-title(style='font-weight:400;font-size:19px;')
                                    | #{agentReport.users}/#{agentReport.inquene}
                                .ukefu-bt-text-content 会话：服务/排队
                .col-lg-3
                    .ukefu-measure
                        a.ukefu-bt(href='/apps/onlineuser.html')
                            i.layui-icon.ukewo-btn.ukefu-measure-btn.ukefu-bg-color-green 
                            .ukefu-bt-text(title='访客端对话建立的NettySocketIO链接数量/系统缓存数据（SystemCache）')
                                .ukefu-bt-text-title(style='font-weight:400;font-size:19px;')
                                    | #{chatClients ? chatClients : 0}/#{systemCaches ? systemCaches : 0}
                                .ukefu-bt-text-content 缓存:Netty/Cache
    .row
        .col-lg-6(style='padding-right:5px;')
            .box
                .box-title
                    h1.site-h1(style='background-color:#EEEEEE;') 接入站的访问统计
                .box-body(style='padding:5px;')
                    //  为ECharts准备一个具备大小（宽高）的Dom
                    #ippv(style='width: 100%;height:200px;')
                    script(type='text/javascript').
                        // 基于准备好的dom，初始化echarts实例
                        var ippvchat = echarts.init(document.getElementById('ippv'), 'wonderland');
                        // 指定图表的配置项和数据
                        var webinviteList = !{pugHelper.toJSON(webInviteReport)}
                        var data = [];ipnums = [];pvnums = []
                        $.each(webinviteList, function (i, w) {
                            data.push(w.data);
                            ipnums.push(w.ipnums);
                            pvnums.push(w.pvnums)
                        })
                        var ippvchat_option = {
                            title: {
                                text: ''
                            },
                            tooltip: {},
                            legend: {
                                data: ['发帖量']
                            },
                            grid: {
                                x: 30,
                                y: 10,
                                x2: 30,
                                y2: 40,
                                // width: {totalWidth} - x - x2,
                                // height: {totalHeight} - y - y2,
                                backgroundColor: 'rgba(0,0,0,0)',
                                borderWidth: 1,
                                borderColor: '#ccc'
                            },
                            xAxis: {
                                data: data
                            },
                            yAxis: {},
                            series: [{
                                name: '访问IP',
                                type: 'line',
                                data: ipnums
                            }, {
                                name: '访问PV',
                                type: 'line',
                                data: pvnums
                            }]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        ippvchat.setOption(ippvchat_option);

        .col-lg-6(style='padding-left:5px;')
            .box
                .box-title
                    h1.site-h1(style='background-color:#EEEEEE;') 坐席咨询数据统计
                .box-body(style='padding:5px;')
                    //  为ECharts准备一个具备大小（宽高）的Dom
                    #consult(style='width: 100%;height:200px;')
                    script(type='text/javascript').
                        // 基于准备好的dom，初始化echarts实例
                        var consultchart = echarts.init(document.getElementById('consult'), 'wonderland');
                        var consultList = !{pugHelper.toJSON(agentConsultReport)};
                        var data = [];users = []
                        $.each(consultList, function (i, c) {
                            data.push(c.data);
                            users.push(c.users);
                        })
                        // 指定图表的配置项和数据
                        var consultchart_option = {
                            title: {
                                text: ''
                            },
                            tooltip: {},
                            legend: {
                                data: ['日期']
                            },
                            grid: {
                                x: 30,
                                y: 10,
                                x2: 30,
                                y2: 40,
                                // width: {totalWidth} - x - x2,
                                // height: {totalHeight} - y - y2,
                                backgroundColor: 'rgba(0,0,0,0)',
                                borderWidth: 1,
                                borderColor: '#ccc'
                            },
                            xAxis: {
                                data: data
                            },
                            yAxis: {},
                            series: [{
                                name: '坐席咨询量',
                                type: 'line',
                                data: users
                            }]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        consultchart.setOption(consultchart_option);
    .row
        .col-lg-6(style='padding-right:5px;')
            .box
                .box-title
                    h1.site-h1(style='background-color:#EEEEEE;') 咨询用户系统占比
                .box-body(style='padding:5px;')
                    //  为ECharts准备一个具备大小（宽高）的Dom
                    #osname(style='width: 100%;height:200px;')
                    script(type='text/javascript').
                        // 基于准备好的dom，初始化echarts实例
                        var osnamechart = echarts.init(document.getElementById('osname'), 'wonderland');
                        var osnameList = !{pugHelper.toJSON(clentConsultReport)}
                        var data = [];valueList = []
                        $.each(osnameList, function (i, o) {
                            data.push(o.data);
                            valueList.push({'value':o.users,'name':o.data});
                        })
                        var osnamechart_option = {
                            title: {
                                text: '咨询用户操作系统占比',
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: data
                            },
                            series: [
                                {
                                    name: '咨询用户操作系统占比',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '60%'],
                                    data: valueList,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        osnamechart.setOption(osnamechart_option);

        .col-lg-6(style='padding-left:5px;')
            .box
                .box-title
                    h1.site-h1(style='background-color:#EEEEEE;') 咨询用户浏览器占比
                .box-body(style='padding:5px;')
                    //  为ECharts准备一个具备大小（宽高）的Dom
                    #browser(style='width: 100%;height:200px;')
                    script(type='text/javascript').
                        // 基于准备好的dom，初始化echarts实例
                        var browserchart = echarts.init(document.getElementById('browser'), 'wonderland');
                        var browserList = !{pugHelper.toJSON(browserConsultReport)}
                        var data = [];valueList = []
                        $.each(browserList, function (i, b) {
                            data.push(b.data);
                            valueList.push({'value':b.users,'name':b.data});
                        })
                        console.log(valueList)
                        var browserchart_option = {
                            title: {
                                text: '咨询用户浏览器占比',
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: data
                            },
                            series: [
                                {
                                    name: '咨询用户浏览器占比',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '60%'],
                                    data: valueList,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        browserchart.setOption(browserchart_option);

